<template>
  <div :class="['step-item', link ? 'linkable' : null]" @click="go">
    <span :style="titleStyle">{{ title }}</span>
    <a-icon v-if="icon" :style="iconStyle" :type="icon" />
    <slot></slot>
  </div>
</template>

<script>
const Group = {
  name: "AStepItemGroup",
  props: {
    align: {
      type: String,
      default: "center",
      validator(value) {
        return ["left", "center", "right"].indexOf(value) != -1;
      },
    },
  },
  render(h) {
    return h("div", { attrs: { style: `text-align: ${this.align}; margin-top: 8px` } }, [
      h("div", { attrs: { style: "text-align: left; display: inline-block;" } }, [this.$slots.default]),
    ]);
  },
};

export default {
  name: "AStepItem",
  Group: Group,
  props: ["title", "icon", "link", "titleStyle", "iconStyle"],
  methods: {
    go() {
      const link = this.link;
      if (link) {
        this.$router.push(link);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.step-item {
  cursor: pointer;
}
:global {
  .ant-steps-item-process {
    .linkable {
      color: @primary-color;
    }
  }
}
</style>
